<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>子节点和父节点</title>
		<style type="text/css">
			#c1{
				width: 600px;
				height: 600px;
				background-color: gold;
				margin: auto;
			}
			#c2{
				width: 500px;
				height: 500px;
				background-color: aqua;
				margin: auto;
			}
			#c3{
				width: 400px;
				height: 400px;
				background-color:gray;
				margin: auto;
			}
			
			#c4{
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		
		<!-- 4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（） -->
			
		<div id="c1">
			<p>第一个包子</p>
		<div id="c2">
			第二个包子
			<div id="c3">
				第三个包子
				<div id="c4">
					第四个包子
				</div>
			</div>
		</div>
		</div>
	</body>
	<script type="text/javascript">
		var div1=document.getElementById('c1');
		var div2=document.getElementById('c2');
		var div3=document.getElementById('c3')
		var div4=document.getElementById('c4')
		//一级父节点
		console.log(div4.parentElement);
		//二级父节点
		console.log(div4.parentElement.parentElement);
		//三级父节点
		console.log(div4.parentElement.parentElement.parentElement);
		
		//一级父元素
		console.log(div4.parentNode);
		//二级父元素
		console.log(div4.parentNode.parentNode);
		//三级父元素
		console.log(div4.parentNode.parentNode.parentNode);
		
		console.log('..........0.......')
		// 5.查找每个DIV的子元素和子节点
		
		//一级子元素和子节点
		console.log(div1.children);
		console.log(div1.childNodes);
		
		//二级子元素和子节点
		console.log(div2.children);
		console.log(div2.childNodes);
		
		//三级子元素和子节点
		console.log(div3.children);
		console.log(div3.childNodes);
		
	</script>
</html>
